<template>
  <div class="list">
    <el-table :data="tableData">
      <el-table-column
        type="index"
        label="序号"
        width="140"
      >
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="创建时间"
        width="180"
      >
        <template slot-scope="scope">
          <div>
            {{scope.row.add_time | datefmt}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="英雄名称"
      >
      </el-table-column>


      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/hero/edit/${scope.row._id}`)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            type="text"
            size="small"
            @click="removeHero(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getHeros()
  },
  methods: {
    async getHeros() {
      const res = await this.$http.get('/heros')
      this.tableData = res.data.message
    },
    removeHero(row) {
      this.$confirm(`此操作将永久删除${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete('/heros/' + row._id)
        // 重新调用达到刷新效果  
        this.getHeros()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>